<template>
    <div class="container">
        <div class="header-container">
            <div class="header">
                <img class="avatar"
                     :src="avatar">
                <p class="name-and-id">
                    <span class="name">小吴</span>
                    <span class="id">ID: {{userInfo.uid}}</span>
                </p>
            </div>
            <van-icon name="setting-o" size="0.6rem"></van-icon>
        </div>

        <div class="main">
            <van-grid class="user-detail" :border="false">
                <van-grid-item :text="userInfo.collectCount">
                    <template #icon>收藏</template>
                </van-grid-item>
                <van-grid-item :text="userInfo.integral">
                    <template #icon>积分</template>
                </van-grid-item>
                <van-grid-item :text="userInfo.couponCount">
                    <template #icon>优惠券</template>
                </van-grid-item>
                <van-grid-item :text="userInfo.now_money">
                    <template #icon>余额</template>
                </van-grid-item>
            </van-grid>

            <van-cell title="订单中心" value="查看全部" is-link @click="handleViewOrder(-1)"></van-cell>

            <van-grid class="orders" :border="false" :column-num="5">
                <van-grid-item icon="bill-o" text="待付款" @click="handleViewOrder(0)" />
                <van-grid-item icon="tosend" text="待发货" @click="handleViewOrder(1)"/>
                <van-grid-item icon="logistics" text="待收货" @click="handleViewOrder(2)"/>
                <van-grid-item icon="comment-o" text="待评价" @click="handleViewOrder(3)" />
                <van-grid-item icon="sign" text="已完成" @click="handleViewOrder(4)" />
            </van-grid>
        </div>
    </div>

    <FooterLayout></FooterLayout>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import FooterLayout from '@/components/FooterLayout.vue'
  import { getUserInfo } from '@/api/user.js'
  import { useRouter } from 'vue-router'

  const userInfo = ref({})
  const loadUserInfo = async () => {
    const { status, data } = await getUserInfo()
    if (status === 200) {
      userInfo.value = data
    }
  }
  loadUserInfo()

  const avatar = computed(() => userInfo.value?.switchUserInfo?.[0].avatar)

  const router = useRouter()
  const handleViewOrder = type => {
    router.push({
      name: 'order',
      params: {
        type,
      }
    })
  }
</script>

<style lang="scss" scoped>
    .container {
        background: radial-gradient(circle at 50% -10%, #FBC546 72%, #F6F7F9 72%) #F6F7F9 0 -300px no-repeat;
        height: 600px;
        padding: 15px 0;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }

    .header {
        flex: 1;
        display: flex;

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 30px;
        }

        .name-and-id {
            display: flex;
            flex-flow: column;
            margin-left: 15px;

            .name {
                font-size: 14px;
                font-weight: 700;
                margin: 6px 0 3px;
            }

            .id {
                font-size: 12px;
            }
        }
    }

    .main {
        margin: 15px 15px 0;

        .user-detail {
            margin-bottom: 10px;
            border-radius: 10px;
            overflow: hidden; /* 没有这个，圆角效果出不来 */

            :deep(.van-grid-item__content .van-badge__wrapper) {
                font-size: 14px;
            }
        }
    }
</style>
